<div class="blade-content">
  <div class="blade-inner">
    <div class="inner-block clearfix">
      <form name="formScope" class="form">
        <fieldset>
          <legend>{{ 'platform.blades.account-detail.labels.user-information' | translate }}</legend>
        </fieldset>
        <va-metaform registered-inputs="blade.metaFields" blade="blade" column-count="1" ng-init="setForm(formScope)"></va-metaform>
      </form>
      <va-widget-container group="accountDetail" blade="blade" gridster-opts="{columns: 3}"></va-widget-container>
    </div>
  </div>
</div>

<script type="text/ng-template" id="statusSelector.html">
  <va-setting-value-select blade="blade"
                           label="'platform.blades.account-detail.labels.status' | translate"
                           placeholder="'platform.blades.account-detail.placeholders.status' | translate"
                           setting="'VirtoCommerce.Other.AccountStatuses'"
                           ng-model="blade.currentEntity.status"
                           allow-clear></va-setting-value-select>
</script>

<script type="text/ng-template" id="accountTypeSelector.html">
  <va-setting-value-select blade="blade"
                           label="'platform.blades.account-detail.labels.account-type' | translate"
                           placeholder="'platform.blades.account-detail.placeholders.account-type' | translate"
                           setting="'VirtoCommerce.Platform.Security.AccountTypes'"
                           ng-model="blade.currentEntity.userType"
                           allow-clear></va-setting-value-select>
</script>

<script type="text/ng-template" id="accountInfo.html">
  <ul class="list __info">
    <li class="list-item">
      <div class="list-t">{{ 'platform.blades.account-detail.labels.locked-state' | translate }}</div>
      <div class="list-descr" ng-class="{alert: blade.accountIsLocked}">{{blade.accountLockedState}}</div>
    </li>
    <li class="list-item">
      <div class="list-t">{{ 'platform.blades.account-detail.labels.last-login-date' | translate }}</div>
      <div class="list-descr" ng-if="blade.currentEntity.lastLoginDate != null">{{ blade.currentEntity.lastLoginDate | amParse | date:'medium' }}</div>
      <div class="list-descr" ng-if="blade.currentEntity.lastLoginDate == null">N/A</div>
    </li>
  </ul>
</script>

<script type="text/ng-template" id="accountEmail.html">
  <div class="form-line">
    <div class="form-line-item-250">
      <div class="form-label">
        {{ 'platform.blades.account-detail.labels.account-email' | translate }}
      </div>
      <div class="form-input">
        <input type="email" ng-model="blade.currentEntity.email" placeholder="{{'platform.blades.account-detail.placeholders.email' | translate}}" />
      </div>
    </div>
    <div class="form-label">
      <div class="form-label">
        {{ 'platform.blades.account-detail.labels.verified' | translate }}
      </div>
      <div>
        <label class="form-label __switch">
          <input type="checkbox" ng-model="blade.currentEntity.emailConfirmed" ng-disabled="!blade.hasVerifyEmailPermission()">
          <span class="switch" ng-class="{disabled: currentEntity.isReadOnly || !blade.hasVerifyEmailPermission() }"></span>
        </label>
      </div>
      <div>
        <a ng-class="blade.currentEntity.email !== blade.origEntity.email ? 'disabled': ''" href="" ng-style="blade.isLinkSent && {'color':'green'} || {'color': ''}" ng-click="blade.sendLink()" va-permission="platform:security:verifyEmail">
          {{blade.isLinkSent ? 'platform.blades.account-detail.labels.link-sent' : 'platform.blades.account-detail.labels.resend-link' | translate }}
        </a>
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="accountUserName.html">
  <div class="form-label">
    {{ 'platform.blades.account-detail.labels.login' | translate }}
  </div>
  <div class="form-input">
    <input type="text" ng-model="blade.currentEntity.userName" placeholder="{{'platform.blades.account-detail.placeholders.user-name' | translate}}" required />
  </div>
</script>